
<%@ page contentType="text/html;charset=UTF-8" %>

<title>用户登录页面</title>
<br><br><br><br>
<h1 style="text-align: center">用户登录</h1>
<div style="text-align: center">
    <h1>生态圈</h1>
</div>
<form action="<%=request.getContextPath()%>/login" method="post" style="text-align: center">
    username<input type="text" name="username" placeholder="请输入用户名 6-16个整数"><br>
    password<input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="登录" onclick="return judgment()">
</form>

<script>
    const reg1 = /^[0-9]{6,16}$/;
    const reg2 = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;

    function judgment(){
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        if(!reg1.test(username)){
            alert("账号格式为6-16个整数");
            return false;
        }
        if(!reg2.test(password)){
            alert("密码包含数字，英文，字符中的两种以上，长度为6-20");
            return false;
        }
        return true;
    }

</script>
<hr>
<form action="<%=request.getContextPath()%>/register.jsp" style="text-align: center">
    <input type="submit" value="用户注册">
</form>
<form action="<%=request.getContextPath()%>/touristLogin" style="text-align: center">
    <input type="submit" value="游客登录">
</form>

<style>
    body{
        background-image: url("picture/new.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        background-size: 100% 100%;
    }
</style>